<template>
	<view class="loginTmp">
		<u-popup
			v-model="login_pop_show"
			mode="bottom"
			border-radius="50"
			@close="event_close"
			:height="height"
			:safe-area-inset-bottom="iphoneX"
			:mask-close-able="maskCloseAble"
		>
			<view style="background-color: transparent">
				<view class="title u-text-center u-font-32 u-p-t-60 u-p-b-24">
					登录绣模卡
				</view>
				<view class="u-flex u-row-center u-p-t-30 u-m-l-60 u-m-r-60">
					<u-icon
						name="weixin-fill"
						color="#07c160"
						size="77"
					></u-icon>
				</view>
				<view class="btns u-p-t-40 u-m-l-60 u-m-r-60">
					<u-button
						v-if="canIUseGetUserProfile"
						type="success"
						ripple
						@click="getUserProfile"
						:custom-style="{
							height: '96rpx',
							borderRadius: '24rpx',
							fontSize: '32rpx',
							backgroundColor: '#F56B79'
						}"
						:loading="loading"
						lang="zh_CN"
						>微信一键登陆</u-button
					>
					<u-button
						v-else
						type="success"
						ripple
						:loading="loading"
						@getuserinfo="startLogin"
						openType="getUserInfo"
						:custom-style="{
							height: '96rpx',
							borderRadius: '24rpx',
							fontSize: '32rpx',
							backgroundColor: '#F56B79'
						}"
						lang="zh_CN"
						>微信一键登陆</u-button
					>
					<!-- <view class="tips u-text-center u-font-20">
						登录即代表您已阅读并同意<span
							@click="toRule"
							style="font-weight: bold; color: #5daeef"
							>《用户协议》</span
						><span
							@click="toRule"
							style="font-weight: bold; color: #5daeef"
							>《隐私权政策》</span
						>
					</view> -->
				</view>
			</view>
		</u-popup>
		<u-popup
			v-model="phonenumber_show"
			mode="bottom"
			border-radius="50"
			width="750rpx"
			:height="height - 184"
			@close="event_phone_close"
			:safe-area-inset-bottom="iphoneX"
			:mask-close-able="true"
		>
			<view
				class="u-text-center"
				style="
					font-weight: 500;
					font-size: 28rpx;
					color: #333;
					padding-top: 36rpx;
					margin-bottom: 46rpx;
				"
			>
				<text>绑定手机号，让您的操作更便捷</text>
			</view>
			<u-button
				@getphonenumber="handlePhonenumber"
				:custom-style="{
					borderRadius: '24rpx',
					height: '96rpx',
					fontSize: '32rpx',
					width: '90%',
				}"
				ripple
				type="primary"
				open-type="getPhoneNumber"
				>一键绑定手机号</u-button
			>
		</u-popup>
	</view>
</template>

<script>
import Login from 'api/login'

export default {
	props: {
		show: {
			type: Boolean,
			default: false
		},
		iphoneX: {
			type: Boolean,
			default: false
		},
		height: {
			type: Number,
			default: 432
		},
		maskCloseAble: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			phonenumber_show: false,
			is_bind_phone: false,
			canIUseGetUserProfile: false,
			loading: false,
			login_pop_show: false
		}
	},
	created() {
		this.login_pop_show = this.show
		// #ifdef MP-WEIXIN
		if (wx.getUserProfile) {
			this.canIUseGetUserProfile = true
		}
		// #endif
	},
	watch: {
		show: {
			immediate: true,
			handler: function(val, oldV) {
				this.login_pop_show = val
			}
		}
	},
	methods: {
		event_close() {
			this.login_pop_show = false
			this.$emit('close')
		},
		event_phone_close() {
			uni.$emit('refresh')
			this.$emit('close')
		},
		getUserProfile(e) {
			// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
			uni.getUserProfile({
				desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
				success: async (info) => {
					this.loading = true
					await Login.startLogin(info.userInfo, false).catch(e => {
						this.loading = false
						this.login_pop_show = false
					})
					this.loading = false
					this.is_bind_phone = Login.checkPhoneData()
					this.event_close()
					if (!this.is_bind_phone) {
						this.phonenumber_show = true
					} else {
						uni.$emit('refresh')
					}
				},
				fail: (e) => {
					console.log(e)
					this.login_pop_show = false
					//用户未授权
					return uni.showModal({
						content: '登陆失败，用户未授权登陆',
						showCancel: false,
						confirmColor: '#fa3534',
					})
				}
			})
		},
		async startLogin(info) {
			// console.log(info)
			//登录
			if (!info.detail.userInfo) {
				//用户未授权
				return uni.showModal({
					content: '登陆失败，用户未授权登陆',
					showCancel: false,
					confirmColor: '#ff9900',
				})
			}
			this.loading = true
			let res = await Login.startLogin(info.detail.userInfo, false).catch(() => {
				this.loading = false
				this.login_pop_show = false
			})
			if(res) {
				this.loading = false
				this.is_bind_phone = Login.checkPhoneData()
				this.event_close()
				if (!this.is_bind_phone) {
					this.phonenumber_show = true
				} else {
					uni.$emit('refresh')
				}
			}
		},
		/**
		 * 用户协议
		 */
		toRule() {
			uni.navigateTo({
				url: '/pageSub/rule/index',
				fail: (e) => {
					console.log(e)
				},
			})
		},
		async handlePhonenumber(e) {
			if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
				return
			}
			let res = await Login.bindPhone(e.detail.encryptedData, e.detail.iv)
			if (res) {
		    this.phonenumber_show = false
				uni.setStorageSync('phoneData', {
					account_phone: res.data.phoneNumber,
					phone: '',
				})
		    setTimeout(() => {
		      uni.$emit('refresh')
		    }, 1000)
			}
		},
	},
}
</script>

<style scoped lang="scss">
.loginTmp {
	width: 100%;
	overflow: hidden;
	.title {
		font-weight: bold;
		color: #333;
	}
	.tips {
		color: #19be6b;
		padding-top: 24rpx;
		padding-bottom: 12rpx;
	}
}
</style>
